// /*
//  * @Date: 2022-03-29 12:55:34
//  * @LastEditors: luoqi
//  * @LastEditTime: 2022-04-12 13:38:10
//  * @FilePath: /payment/pay/src/pages/PayGround/PayGroundRequest.jsx
//  */
// import React, { useState } from 'react'
// import Tab from '../../components/Tabs'
// import { Row, Col, Form, Input, DatePicker, Select, Button, Table, Modal, ConfigProvider, Pagination } from 'antd'
// import { SearchOutlined } from '@ant-design/icons'
// import HocBUtton from '../../components/HOC/HocButton/CommonButton'
// import zhCN from 'antd/es/locale/zh_CN'
// import styles from './index.module.css'
// const { Option } = Select
// const { RangePicker } = DatePicker
// export default function PayGroundRequest() {
//   const [isModalVisible, setIsModalVisible] = useState(false);
//   const columns = [
//     {
//       title: '商户名称',
//       dataIndex: 'name',
//     },
//     {
//       title: '充值金额',
//       dataIndex: 'price',
//     },
//     {
//       title: '卡商',
//       dataIndex: 'card',
//     },
//     {
//       title: '操作人',
//       dataIndex: 'contral',
//     },
//     {
//       title: '充值时间',
//       dataIndex: 'data',
//     },
//     {
//       title: '操作',
//       width: 300,
//       dataIndex: 'button',
//       render: (category) => (
//         <ConfigProvider locale={zhCN}>
//           <HocBUtton handlerClick={Assign} buttonName='指定卡商' className='red myWidth' size='small'></HocBUtton>
//           <Modal title="分配卡商" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
//             <Form onFinish={CardChoice}>
//               <Form.Item name="卡商选择" label="Gender" rules={[{ required: true }]}>
//                 <Select
//                   placeholder="选择卡商"
//                   onChange={onGenderChange}
//                   allowClear
//                 >
//                   <Option value="male">male</Option>
//                   <Option value="female">female</Option>
//                   <Option value="other">other</Option>
//                 </Select>
//               </Form.Item>
//             </Form>
//           </Modal>
//           {/* 状态 */}
//           {/* <span className={styles.success}>审核成功</span>
//           <span className={styles.refuse}>已拒绝</span> */}
//           <HocBUtton handlerClick={() => { Show(category) }} buttonName='编辑' className='yellow myWidth' size='small'></HocBUtton>
//           <HocBUtton handlerClick={() => { Show(category) }} buttonName='删除' className='green myWidth' size='small'></HocBUtton>
//         </ConfigProvider>
//       )
//     },
//   ];
//   const CardChoice = (values) => {
//     console.log(values);
//   }
//   const onGenderChange = (values) => {
//     console.log(values);
//   }
//   const handleOk = () => {
//     setIsModalVisible(false);
//   };

//   const handleCancel = () => {
//     setIsModalVisible(false);
//   };
//   function Show(category) {
//     console.log(category);
//   }
//   function Assign() {
//     setIsModalVisible(true)
//   }
//   // 表格模拟数据
//   const dataSource = [
//     {
//       key: '1',
//       name: '胡彦斌',
//       price: 32,
//       card:  <span className={styles.cardRed}>lodin</span>,
//       contral: 'test',
//       data: '2022-03-30 10:44:38',
//       address: '西湖区湖底公园1号',
//     },
//     {
//       key: '2',
//       name: '胡彦斌',
//       price: 32,
//       card: <span className={styles.cardBlue}>lodin</span>,
//       contral: 'test',
//       data: '2022-03-30 10:44:38',
//       address: '西湖区湖底公园1号',
//     },
//     {
//       key: '3',
//       name: '胡彦斌',
//       price: 32,
//       card:  <span className={styles.cardOrange}>lodin</span>,
//       contral: 'test',
//       data: '2022-03-30 10:44:38',
//       address: '西湖区湖底公园1号',
//     },
//     {
//       key: '4',
//       name: '胡彦斌',
//       price: 32,
//       card: 'lodan',
//       contral: 'test',
//       data: '2022-03-30 10:44:38',
//       address: '西湖区湖底公园1号',
//     },
//     {
//       key: '5',
//       name: '胡彦斌',
//       price: 32,
//       card: 'lodan',
//       contral: 'test',
//       data: '2022-03-30 10:44:38',
//       address: '西湖区湖底公园1号',
//     },
//     {
//       key: '6',
//       name: '胡彦斌',
//       price: 32,
//       card: 'lodan',
//       contral: 'test',
//       data: '2022-03-30 10:44:38',
//       address: '西湖区湖底公园1号',
//     },
//   ];
//   // 复选框默认选中
//   const [selectkey, setSelectkey] = useState([])
//   const [pagination, setpagination] = useState({
//     defaultCurrent: 1,
//     total: 6,
//     pageSize: 5,
//     Num: 0,
//     showQuickJumper: 'showQuickJumper',
//     onChange: function onchange(page, ps) {
//       console.log(page, ps);
//     }
//   })
//   // 单选复选
//   function onSelectChange(selectedRowKeys) {
//     console.log(selectedRowKeys);
//     setSelectkey(selectedRowKeys)
//   };
//   const rowSelection = {
//     selectkey,
//     onChange: onSelectChange,
//   };
//   // 搜索
//   const onSubmit = (fieldsValue) => {
//     const rangeValue = fieldsValue['起止时间']
//     const values = {
//       ...fieldsValue,
//       '起止时间': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
//     }
//     console.log('Received values of form: ', values);
//   }
//   return (
//     <ConfigProvider locale={zhCN}>
//       <Row>
//         <Col span={24}>
//           <Tab title={'入金请求'} />
//         </Col>
//       </Row>
//       <Row className={styles.requestSearch}>
//         <Form layout="inline" onFinish={onSubmit}>
//           <Col span={4}>
//             <Form.Item name='account'>
//               <Input placeholder='收款账户' />
//             </Form.Item>
//           </Col>
//           <Col span={4}>
//             <Form.Item name='user'>
//               <Select placeholder="选择商户">
//                 <Option value="1">o1</Option>
//                 <Option value="2">o2</Option>
//                 <Option value="3">o3</Option>
//               </Select>
//             </Form.Item>
//           </Col>
//           <Col span={4}>
//             <Form.Item name='status'>
//               <Select placeholder="当前状态">
//                 <Option value="1">o1</Option>
//                 <Option value="2">o2</Option>
//                 <Option value="3">o3</Option>
//               </Select>
//             </Form.Item>
//           </Col>
//           <Col span={4}>
//             <Form.Item name='card'>
//               <Select placeholder="选择卡商">
//                 <Option value="1">o1</Option>
//                 <Option value="2">o2</Option>
//                 <Option value="3">o3</Option>
//               </Select>
//             </Form.Item>
//           </Col>
//           <Col span={6}>
//             <Form.Item name='起止时间' >
//               <RangePicker locale={zhCN} />
//             </Form.Item>
//           </Col>
//           <Col span={2} >
//             <Form.Item  >
//               <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
//                 搜索
//               </Button>
//             </Form.Item>
//           </Col>
//         </Form>
//       </Row>
//       <Row>
//         <Col span={24}>
//           <Table pagination={pagination} rowSelection={rowSelection} columns={columns} dataSource={dataSource} title={() => <Row><Col span={2} className={styles.tableTitle}>充值金额</Col><Col span={6}><Input disabled placeholder='5125830.44/5125830.44' /></Col></Row>} />
//         </Col>
//       </Row>
//     </ConfigProvider>
//   )
// }

/*
 * @Date: 2022-03-29 12:49:20

 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-12 13:31:52
 * @LastEditors: fenglan
 * @LastEditTime: 2022-03-30 15:24:10

 * @FilePath: /payment/pay/src/pages/AgencyTenant/AgencyPayRequset.jsx
 */
import React, { useState, useEffect } from 'react'
import Tab from '../../components/Tabs'
import { Row, Col, Form, Input, DatePicker, Select, Button, Table, Modal, ConfigProvider, Pagination, } from 'antd'
import { SearchOutlined,ReloadOutlined } from '@ant-design/icons'
import HocBUtton from '../../components/HOC/HocButton/CommonButton'
import zhCN from 'antd/es/locale/zh_CN'
import styles from './index.module.css'
import axios from '../../util/axios'
import qs from 'qs'
const { Option } = Select
const { RangePicker } = DatePicker
export default function PayGroundRequest() {
  const [isModalVisible, setIsModalVisible] = useState(false);
  /*操作状态 0--默认状态    渲染：指定卡商和拒绝
            1--指定卡商后：渲染：待卡商处理、通过、拒绝
            2--通过后：    渲染：审核通过
            3--拒绝后：    渲染：已拒绝
*/
  const [dataSource, setDataSource] = useState([]);
  const [zhuangTaiList, setzhuangTaiList] = useState([]);//状态列表
  const [czjine, setczjine] = useState()//顶部充值完成金额
  const [czTotalMoney, setczTotalMoney] = useState()//顶部充值总金额
  const [kaShangList, setkaShangList] = useState([])//卡商列表
  const [ShangHuList, setShangHuList] = useState([])//商户列表
  const [cardForm] = Form.useForm();//指定卡商
  const [searchForm] = Form.useForm();//搜索
  let [doState, setDoState] = useState(0);
  useEffect(() => {
    gettableData()
  }, [])
  //渲染表格函数
  const gettableData = () => {
    axios({
      method: 'get',
      url: 'admin/rujinqinqiu/selectAllRuJinQinQiu',
      params: { limit: 9999, page: 1 }
    }).then(res => {
      let dataArr = res.data.ruJinQinQiuList.map((item, index) => {
        item.key = index
        return item
      });
      console.log(dataArr);
      console.log(res.count);
      setDataSource(dataArr)
      setzhuangTaiList(res.data.zhuangTaiList)
      setczjine(res.data.chongZhiFinishMoney)
      setkaShangList(res.data.kaShangList)
      setczTotalMoney(res.data.chongZhiTotalMoney)
      setShangHuList(res.data.shangHuList)
    })

  }
  // 定义表格一行内容
  const [rowInfo, setRowinfo] = useState({});
  //指定卡商
  const CardChoice = (rowvalues) => {

  }
  const onGenderChange = (values) => {
    console.log(values);
  }
  //确定指定卡商
  const handleOk = () => {
    setIsModalVisible(false);
    console.log('rowInfo', rowInfo);
    let card = cardForm.getFieldValue()
    rowInfo.kashang = card.nickName
    // rowInfo.zhuangTai=''
    rowInfo.caoZuoRen = JSON.parse(localStorage.getItem('user')).uName
    console.log('传入的参数', rowInfo);
    axios({
      method: 'post',
      url: 'admin/rujinqinqiu/zhidingKaShang',
      data: rowInfo
    }).then(res => {
      console.log(res);
      if (res.code === 200) {
        gettableData();
      }
    })
  };
  //拒绝
  const reject = (rowInfo) => {
    rowInfo.caoZuoRen = JSON.parse(localStorage.getItem('user')).uName
    console.log(rowInfo);
    axios({
      method:'post',
      url:'admin/rujinqinqiu/juJue',
      data:rowInfo
    }).then(res=>{
      console.log(res);
      if(res.code===200){
        gettableData();
      }
    })
  }

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  //通过
  function Show(rowInfo) {
    rowInfo.caoZuoRen = JSON.parse(localStorage.getItem('user')).uName
    console.log(rowInfo);
    axios({
      method:'post',
      url:'admin/rujinqinqiu/tongGuo',
      data:rowInfo
    }).then(res=>{
      console.log(res);
      if(res.code===200){
        gettableData();
      }
    })

  }

  // 复选框默认选中
  const [selectkey, setSelectkey] = useState([])
  const [pagination, setpagination] = useState({
    defaultCurrent: 1,
    total: 6,
    pageSize: 5,
    Num: 0,
    showQuickJumper: 'showQuickJumper',
    onChange: function onchange(page, ps) {
      console.log(page, ps);
    }
  })
  // 单选复选
  function onSelectChange(selectedRowKeys) {
    console.log(selectedRowKeys);
    setSelectkey(selectedRowKeys)
  };
  const rowSelection = {
    selectkey,
    onChange: onSelectChange,
  };
  // 搜索
  const serch = (fieldsValue) => {
    const rangeValue = fieldsValue['Time']
    const values = {
      ...fieldsValue,
      'Time': rangeValue && [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
    }
    console.log('搜索表单的值: ', values);
    axios({
      method: 'get',
      url: 'admin/rujinqinqiu/selectRuJinQinQiu',
      params: {
        limit: 9999,
        page: 1,
        userId: values.id,
        zhuangTai: values.zhuangTai,
        startTime: values.Time ? values.Time[0] : '',
        endTime: values.Time ? values.Time[1] : '',
        kashang: values.kashang
      }
    }).then(res => {
      console.log(res);
      let dataArr = res.data.ruJinQinQiuList.map((item, index) => {
        item.key = index
        return item
      });
      setDataSource(dataArr)
    })
  }
  //刷新
  const reload=()=>{
    gettableData();
    searchForm.resetFields()
  }
  const columns = [
    {
      title: '商户名称',
      dataIndex: 'nickName',
    },
    {
      title: '充值金额',
      dataIndex: 'money',
    },
    {
      title: '卡商',
      dataIndex: 'kashang',
    },
    {
      title: '操作人',
      dataIndex: 'caoZuoRen',
    },
    {
      title: '充值时间',
      dataIndex: 'chongZhiTimec',
    },
    {
      title: '操作',
      width: 300,
      dataIndex: 'zhuangTai',
      render: (text, record, index) => {
        let state = record.zhuangTai;
        switch (state) {
          case '审核成功': return <span style={{ color: 'greenyellow' }}>审核成功</span>;
          case '已拒绝': return <span style={{ color: 'red' }}>已拒绝</span>;
          case '待卡商处理': return <> <span style={{ color: 'yellow' }}>待卡商处理</span><HocBUtton handlerClick={() => { setRowinfo(record); Show(record) }} buttonName='通过' className='yellow myWidth' size='small'></HocBUtton>
            <HocBUtton handlerClick={() => { reject(record) }} buttonName='拒绝' className='green myWidth' size='small'></HocBUtton></>

          default: return <ConfigProvider locale={zhCN}>
            <HocBUtton
              handlerClick={() => { setRowinfo(record); setIsModalVisible(true); }} buttonName='指定卡商'
              className='red myWidth'
              size='small'></HocBUtton>
            <Modal title="分配卡商" visible={isModalVisible} onOk={(record) => handleOk(record)} onCancel={handleCancel}>
              <Form
                form={cardForm}
                onFinish={CardChoice}>
                <Form.Item name="nickName" label="Gender" rules={[{ required: true }]}>
                  <Select
                    placeholder="选择卡商"
                    allowClear
                  >
                    {
                      kaShangList.map((item, index) => {
                        return (<Select.Option key={index} value={item.nickName} >{item.nickName}</Select.Option>)
                      })
                    }
                  </Select>
                </Form.Item>
              </Form>
            </Modal>
            <HocBUtton handlerClick={() => { Show(record) }} buttonName='通过' className='yellow myWidth' size='small'></HocBUtton>
            <HocBUtton handlerClick={() => { reject(record) }} buttonName='拒绝' className='green myWidth' size='small'></HocBUtton>
          </ConfigProvider>

        }
      }
    }
  ]
  return (
    <ConfigProvider locale={zhCN}>
      <Row>
        <Col span={24}>
          <Tab title={'入金请求'} />
        </Col>
      </Row>
      <Row className={styles.requestSearch}>
        <Form layout="inline" onFinish={serch} form={searchForm}>
          {/* <Col span={4}>
            <Form.Item name='account'>
              <Input placeholder='收款账户' />
            </Form.Item>
          </Col> */}
          <Col span={4}>
            <Form.Item name='id'>
              <Select placeholder="选择商户">
                {
                  ShangHuList.map((item, index) => {
                    return (<Select.Option key={index} value={item.id} >{item.nickName}</Select.Option>)
                  })
                }
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name='zhuangTai'>
              <Select placeholder="当前状态">
                {
                  zhuangTaiList.map((item, index) => {
                    return (<Select.Option key={index} value={item} >{item}</Select.Option>)
                  })
                }
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name='kashang'>
              <Select placeholder="选择卡商">
                {kaShangList.map((item, index) => {
                  return (<Select.Option key={index} value={item.nickName} >{item.nickName}</Select.Option>)
                })
                }
              </Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name='Time' >
              <RangePicker locale={zhCN} />
            </Form.Item>
          </Col>
          <Col span={2} >
            <Form.Item  >
              <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                搜索
              </Button>
            </Form.Item>
          </Col>
          <Col span={2} offset={1}  >
              <Form.Item >
                <Button shape="circle" icon={<ReloadOutlined />} onClick={reload} />
              </Form.Item>
            </Col>
        </Form>
      </Row>
      <Row>
        <Col span={24}>
          <Table
           
            rowSelection={rowSelection}
            columns={columns}
            dataSource={dataSource}
            title={() => <Row><Col span={2} className={styles.tableTitle}>充值金额</Col><Col span={6}><Input disabled placeholder={czTotalMoney + "/" + czjine} /></Col></Row>} />
        </Col>
      </Row>
    </ConfigProvider>
  )
}


